<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <title>聊天室主页</title>
    <!-- 2. jQuery导入，建议使用1.9以上的版本 -->
    <script src="js/jquery-3.1.1.min.js"></script>

    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/client.css"/>
</head>
<body>
<div class="cover"></div>
<!--整个界面的容器-->
<div class="client-container">
    <div class="main">
<!--左侧区域展示会话界面和好友列表-->
        <div class="left">
            <div class="user"></div>
            <div class="search">
                <input type="text">
                <button></button>
            </div>
<!--            标签页-->
            <div class="tab">
                <div class="tab-session"></div>
                <div class="tab-friend"></div>
            </div>
<!--            会话列表-->
            <ul class="list" id="session-list">
                <!-- 会话标签⻚内容 -->
<!--                    <li>-->
<!--                        <h3>lisi</h3>-->
<!--                        <p>你好</p>-->
<!--                        <div class="row">-->
<!--                            <button>接受</button>-->
<!--                            <button>拒绝</button>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                    <li>-->
<!--                        <h3>lisi</h3>-->
<!--                        <p>你好</p>-->
<!--                        <div class="row">-->
<!--                            <button>接受</button>-->
<!--                            <button>拒绝</button>-->
<!--                        </div>-->
<!--                    </li>-->
<!--                <li class="selected">-->
<!--                    <h3>好友1</h3>-->
<!--                    <p>用户之间的对话</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h3>好友1</h3>-->
<!--                    <p>用户之间的对话</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h3>好友1</h3>-->
<!--                    <p>用户之间的对话</p>-->
<!--                </li>-->
<!--                <li >-->
<!--                    <h3>好友1</h3>-->
<!--                    <p>用户之间的对话</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h3>好友1</h3>-->
<!--                    <p>用户之间的对话</p>-->
<!--                </li>-->
<!--                <li>-->
<!--                    <h3>好友1</h3>-->
<!--                    <p>用户之间的对话</p>-->
<!--                </li>-->
            </ul>
            <ul class="list hide" id="friend-list">
<!--                <li>-->
<!--                    <h4>张三</h4>-->
<!--                </li><li>-->
<!--                    <h4>李四</h4>-->
<!--                </li><li>-->
<!--                    <h4>王五</h4>-->
<!--                </li><li>-->
<!--                    <h4>赵六</h4>-->
<!--                </li><li>-->
<!--                    <h4>林七</h4>-->
<!--                </li>-->
            </ul>
        </div>
<!--        右侧区域展示聊天窗口-->
        <div class="right">

            <div class="title"></div>
<!--            消息区-->
            <div class="message-show">

<!--&lt;!&ndash;                消息行&ndash;&gt;-->
<!--                <div class="message message-left">-->
<!--&lt;!&ndash;                    消息块&ndash;&gt;-->
<!--                    <div class="box">-->
<!--                        <h4>张三</h4>-->
<!--                        <p>看看我说了什么</p>-->
<!--                    </div>-->
<!--                </div>-->
<!--&lt;!&ndash;                消息行&ndash;&gt;-->
<!--                <div class="message message-right">-->
<!--&lt;!&ndash;                    消息块&ndash;&gt;-->
<!--                    <div class="box">-->
<!--                        <h4>李四</h4>-->
<!--                        <p>你说了什么</p>-->
<!--                    </div>-->
<!--                </div>-->
            </div>
            <!--        消息编辑框-->
            <textarea class="message-input"></textarea>
            <div class="ctrl">
                <button>发送</button>
            </div>
        </div>
    </div>
    <script src="js/client.js"></script>
</div>

</body>
</html>